<template>
  <div class="content">
    <div class="resoure">
      <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
      >
        <el-menu-item index="1">资源饱和一览</el-menu-item>

        <el-menu-item index="2">资源使用分析</el-menu-item>
      </el-menu>
      <div class="link" v-show="activeIndex==1">
        <div class="seachlist">
          <div class="listitem">
            <div class="itemname">媒介</div>
            <el-select v-model="value" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </div>
          <div class="listitem">
            <div class="itemname">频道</div>
            <el-select v-model="value" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </div>
          <div class="listitem">
            <div class="itemname">年份</div>
            <el-date-picker v-model="value3" type="year" placeholder="选择年"></el-date-picker>
          </div>
          <div class="listitem" style="width:10%;">
            <el-button type="primary">确认</el-button>
          </div>
        </div>
        <div class="eachs" id="myChart1"></div>
      </div>
      <div class="link" v-show="activeIndex==2">
        <div class="seachlist">
          <div class="listitem">
            <div class="itemname listitem1">媒介</div>
            <el-select v-model="value" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </div>
          <div class="listitem">
            <div class="itemname listitem1">媒体</div>
            <el-select v-model="value" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </div>
          <div class="listitem">
            <div class="itemname listitem1">月份</div>
            <el-date-picker v-model="value3" type="year" placeholder="选择年"></el-date-picker>
          </div>
          <div class="listitem">
            <div class="itemname listitem1">统计纬度</div>
            <el-select v-model="value" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </div>
          <div class="listitem">
            <div class="itemname listitem1">统计指标</div>
            <el-checkbox v-model="checked1">饱和度</el-checkbox>
            <el-checkbox v-model="checked2">销售额</el-checkbox>
          </div>
          <div class="listitem listitem1" style="width:10%;">
            <el-button type="primary">统计</el-button>
          </div>
        </div>
        <h3>各媒介资源饱和度分析</h3>
        <div class="eachs1" id="myChart11"></div>
      </div>
    </div>
  </div>
</template>
<script>
import { getResourceanalysis } from "@/api/Business.js";
import echarts from "echarts";
export default {
  data() {
    return {
      activeIndex: "1",
      options: [
        {
          value: "选项1",
          label: "黄金糕"
        },
        {
          value: "选项5",
          label: "北京烤鸭"
        }
      ],
      value3: "",
      value: "",
      value1: "",
      checked1: false,
      checked2: true,
      echartsParam: {
        tooltip: {
          position: "top"
        },
        visualMap: {
          min: 0,
          max: 1000,
          calculable: true,
          orient: "horizontal",
          left: "center",
          top: "top"
        },

        calendar: [
          {
            range: "2017",
            cellSize: ["auto", 20]
          }
        ],

        series: [
          {
            type: "heatmap",
            coordinateSystem: "calendar",
            calendarIndex: 0,
            data: []
          }
        ]
      }
    };
  },
  created() {
    this.getresoureinfo();
  },
  mounted() {
    
    this.drawLine1();
  },
  methods: {
    //获取资源饱和一览
    getresoureinfo() {
      getResourceanalysis().then(res => {
        console.log(res);
        if(res.code==200){
          this.echartsParam.calendar[0].range=res.data.year
          this.echartsParam.series[0].data=res.data.date
          console.log(this.echartsParam)
          this.drawLine();
        }
      });
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
      if (key == this.activeIndex) {
        return;
      }

      this.activeIndex = "" + key;
      // console.log(this.activeIndex);
      // if(this.activeIndex==1){
      //   this.drawLine()
      // }else{
      //   this.drawLine1()
      // }
      // this.drawLine()
      // this.drawLine1()
    },


    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      console.log(echarts);
      let myChart = echarts.init(document.getElementById("myChart1"));
      // 绘制图表
      console.log("xxxxxxx");
      myChart.setOption(this.echartsParam);
    },
    drawLine1() {
      // 基于准备好的dom，初始化echarts实例
      console.log(echarts);
      let myChart = echarts.init(document.getElementById("myChart11"));
      // 绘制图表
      console.log("xxxxxxx");
      myChart.setOption({
        color: ["#3398DB"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
            data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: "value"
          }
        ],
        series: [
          {
            name: "直接访问",
            type: "bar",
            barWidth: "60%",
            data: [10, 52, 200, 334, 390, 330, 220]
          }
        ]
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.resoure {
  width: 97%;
  margin: 0 auto;
}
.seachlist {
  width: 97%;
  margin: 0 auto;
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  .listitem {
    width: 30%;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    .itemname {
      width: 110px;
      font-size: 15px;
    }
  }
}
.eachs {
  width: 90%;
  height: 1000px;
  margin: 0 auto;
  margin-top: 20px;
}
.eachs1 {
  height: 500px;
  width: 800px;
  margin: 0 auto;
  margin-bottom: 500px;
  // margin-top: 40px;
}
h3 {
  width: 800px;
  margin: 0 auto;
  margin-top: 50px;
}
</style>